<!--
 * 人员选择组件
 * |-- div(#task-issue-attendee-container) 总容器
 *   |-- Button 添加任务对象 按钮
 *   |-- Modal 添加任务对象对话框
 *     |-- p(.task-issue-tips) 温馨提示
 *     |-- Divider 分界线
 *     |-- div(.task-issue-atd-selector) 
-->
<template>
    <div id="task-issue-attendee-container">
        <Button type="primary" @click="display = true">添加任务对象</Button>
        <Modal
            v-model="display"
            title="选择任务参与对象"
            @on-ok="ok">
            <p class="task-issue-tips">
                * 可同时选择多个部门、小组，但不允许<strong> 跨部门选择小组 </strong>或<strong> 跨小组选择成员 </strong>
            </p>
            <Divider dashed />
            <People_Selector :list="$store.state.info.depts" :level=1 @on-change="changed"/>
            <Divider dashed />
            <People_Selector :list="groupList" :level=2 @on-change="changed" />
            <Divider dashed />
            <People_Selector :list="stuList" :level=3 @on-change="changed" />
        </Modal>
    </div>
</template>

<script>

import local_script from "@task/js/util"
import People_Selector from "@task/vue/issue-task-selector"

export default {
    components: {
        People_Selector
    },
    data() {
        return {
            display: false,
            dList: [],
            groupList: [],
            gList: [],
            stuList: [],
            sList: []
        }
    },
    watch: {
        dList() {
            if (this.dList.length === 1) {
                let department = this.$jspt.getDept(this.$store.state.info.depts, this.dList);
                this.groupList = department === undefined ? [] : department.groupList
            } else {
                this.groupList = [];
                this.gList = [];
            }
        },
        gList() {
            if (this.gList.length === 1) {
                let group = this.$jspt.getGroup(this.groupList, this.gList)
                this.stuList = group === undefined ? [] : group.studentList
            } else {
                this.stuList = [];
                this.sList = [];
            }
        }
    },
    methods: {
        changed(v) {
            switch(v.level) {
                case 1: return this.dList = v.value
                case 2: return this.gList = v.value
                case 3: return this.sList = v.value
            }
        },
        ok() {
            local_script.updateData(this.dList, this.gList, this.sList);
        }
    }
}
</script>

<style lang="scss">
@import "@task/scss/issue-task-attendee.scss";
</style>